<template>
  <van-pull-refresh v-model="refLoading" @refresh="onRefresh">
    <div class="box">
      <div class="tbox">
        <div class="t1">{{ walletInfo.capital?.frozen }} USDT</div>
        <!-- <div class="t2">≈$ {{ walletInfo.capital?.balance }}</div> -->
        <div class="tb">
          <!-- <img src="@/assets/images/xiangyou.png" alt="" /> -->
          <!-- <div class="tb1">
            <div class="tb11">累计充值</div>
            <div class="tb12">{{ handleNum(walletInfo.capital?.rechargeBalance) }}</div>
          </div> -->
          <div class="tb1">
            <div class="tb11">累计奖励</div>
            <div class="tb12">{{ handleNum(walletInfo.capital?.rewardBalance) }}</div>
          </div>
        </div>
        <div class="t3">
          <!-- <div
            class="t3-item"
            style="background: #36b4ea; color: #fff"
            @click="toPage('/capital/transfertrue')"
          >
            划转
          </div> -->
          <div class="t3-item" @click="handleWithdrawal" style="background: #36b4ea; color: #fff">提现</div>
          <!-- <div class="t3-item" @click="handleTrans">划转</div> -->
        </div>
      </div>
      <div class="obox">
        <!-- <img
          class="rlimg"
          src="@/assets/images/rili.png"
          alt=""
          @click="timeShow = true"
        /> -->
        <van-icon name="filter-o" class="rlimg" @click="timeShow = true" />
        <span class="rlfont" v-show="startDate"
          >{{ showTime[0] }}-{{ showTime[1] }}</span
        >
        <van-tabs
          v-model:active="tabIndex"
          sticky
          shrink
          title-inactive-color="#878B97"
          title-active-color="#000"
          color="#000"
          line-width="20px"
          background="#fff"
        >
          <!-- <van-tab title="购买燃油包">
            <div class="mbox">
              <div
                class="mli"
                v-for="item in fuellList"
                :key="item.id"
                @click="handlePay(item.id)"
              >
                <div class="mfont">
                  <div class="m0">{{ item.name }}<span style="font-size:12px;color:#333">（一经售出 概不退换）</span></div>
                  <div class="m1">
                    +{{ item.fuelQuantity }}<span>燃油值, {{item.capitalPrice * 10}}贡献值</span>
                  </div>
                  <div class="m2">
                    <span>花费</span>{{ item.capitalPrice }}<span>USDT</span>
                  </div>
                </div>
                <div class="m3">立即购买</div>
              </div>
            </div>
          </van-tab> -->
          <van-tab title="奖励明细">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList1"
              :immediate-check="false"
            >
              <div
                class="libox"
                v-for="(item, index) in rewardList"
                :key="index"
              >
                <card-item
                  :propItems="rewardPropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab>
          <!-- <van-tab title="划转记录">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList2"
              :immediate-check="false"
            >
            <div
                class="libox"
                v-for="(item, index) in transferList"
                :key="index"
              >
                <card-item
                  :propItems="transferPropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab> -->
          <van-tab title="提现记录">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList3"
              :immediate-check="false"
            >
              <div
                class="libox"
                v-for="(item, index) in withdrawalList"
                :key="index"
              >
                <card-item
                  :propItems="withdrawalPropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab>
          <!-- <van-tab title="划转记录">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList4"
              :immediate-check="false"
            >
              <div
                class="libox"
                v-for="(item, index) in transferList"
                :key="index"
              >
                <card-item
                  :propItems="transferPropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab> -->
        </van-tabs>
      </div>
    </div>
    <van-calendar
      v-model:show="timeShow"
      :min-date="new Date(new Date().getTime() - 180 * 24 * 60 * 60 * 1000)"
      type="range"
      @confirm="onConfirm"
    />
  </van-pull-refresh>
</template>
    
<script setup lang='ts'>
import CardItem from "@/components/CardItem/index.vue";
import {
  reactive,
  ref,
  computed,
  onMounted,
  watch,
  onUnmounted,
  defineExpose,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import http from "@/utils/http";
import { formatDate } from "@/utils/common";
import { Toast, Dialog } from "vant";
const router = useRouter();
const tabIndex = ref(0);
const store = useStore();
const loading = ref(false);
const finished = ref(false);
const walletInfo = computed(() => store.state.users.wallet);
let rewardList = ref([]);
let transferList = ref([]);
let withdrawalList = ref([]);
// let fuellList = ref<any[]>([]);

const pageIndex = ref(1);
const pageSize = ref(200);

const refLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    Toast("刷新成功");
    resetList();
    store.dispatch("users/getUserWalletInfo");
    refLoading.value = false;
  }, 1000);
};
const handleNum = (num:any)=>{
  if(num){
    return +num.toFixed(2)
  }else{
    return num
  }
}
const resetList = () => {
  pageIndex.value = 1;
  showTime.value = ["", ""];
  startDate.value = "";
  endDate.value = "";
  getList(tabIndex.value);
};
const timerc = setInterval(() => {
  store.dispatch("users/getUserWalletInfo");
  resetList();
}, 1000 * 30);
onUnmounted(() => {
  clearInterval(timerc);
});
const startDate = ref("");
const endDate = ref("");
const showTime = ref(["", ""]);
const timeShow = ref(false);
const onConfirm = (values: any) => {
  const [start, end] = values;
  timeShow.value = false;
  startDate.value = formatDate(start, "yyyy-MM-dd") + " 00:00:00";
  endDate.value = formatDate(end, "yyyy-MM-dd") + " 00:00:00";
  pageIndex.value = 1;
  const xx1 = startDate.value.split(" ")[0].split("-");
  const xx2 = endDate.value.split(" ")[0].split("-");
  showTime.value = [xx1[1] + "/" + xx1[2], xx2[1] + "/" + xx2[2]];
  console.log(showTime.value);
  getList(tabIndex.value);
};
// const getFuelList = () => {
//   http.get("user/fuel_set_meal/option").then((res: any) => {
//     if (res.code === 0) {
//       fuellList.value = res.data;
//     }
//   });
// };
const getTabList1 = () => {
  http
    .post("user/fuel_receive_dividends/app/page", {
      current: pageIndex.value, //页数
      size: pageSize.value, //每页条数
      // state: 2, //状态（1：充值中，2：已完成，3：已失败）
      startTime: startDate.value, //开始时间
      endTime: endDate.value, //结束时间
      isAllChild: 0,
    })
    .then((res: any) => {
      if (res.code === 0) {
        if (pageIndex.value === 1) {
          rewardList.value = res.data.records;
        } else {
          rewardList.value = rewardList.value.concat(res.data.records);
        }
        if (rewardList.value.length >= res.data.total) {
          finished.value = true;
        }
        loading.value = false;
      }
    });
};
const getTabList2 = () => {
  http
    .post("user/transfer_detailed/app/page", {
      type:2,
      current: pageIndex.value, //页数
      size: pageSize.value, //每页条数
      // type: 1, //操作类型( 0 资金转燃料  1 燃料转资金 )
      startTime: startDate.value, //开始时间
      endTime: endDate.value, //结束时间
    })
    .then((res: any) => {
      if (res.code === 0) {
        let zdata = res.data.records
        if (pageIndex.value === 1) {
          transferList.value = zdata;
        } else {
          transferList.value = transferList.value.concat(zdata);
        }
        loading.value = false;
        if (transferList.value.length >= res.data.total) {
          finished.value = true;
        }
      }
    });
};
const getTabList3 = () => {
  http
    .post("user/withdrawal_record/app/page", {
      type:1,
      current: pageIndex.value, //页数
      size: pageSize.value, //每页条数
      startTime: startDate.value, //开始时间
      endTime: endDate.value, //结束时间
    })
    .then((res: any) => {
      if (res.code === 0) {
        if (pageIndex.value === 1) {
          withdrawalList.value = res.data.records;
        } else {
          withdrawalList.value = withdrawalList.value.concat(res.data.records);
        }
        if (withdrawalList.value.length >= res.data.total) {
          finished.value = true;
        }
        loading.value = false;
      }
    });
};
// const getTabList4 = () => {
//   http
//     .post("user/transfer_detailed/app/page", {
//       current: pageIndex.value, //页数
//       size: pageSize.value, //每页条数
//       // type: 1, //操作类型( 0 资金转燃料  1 燃料转资金 )
//       startTime: startDate.value, //开始时间
//       endTime: endDate.value, //结束时间
//     })
//     .then((res: any) => {
//       if (res.code === 0) {
//         let zdata = res.data.records.map((v: any) => {
//           if (v.type === "资金转燃料") {
//             v.from = "资金账户";
//             v.to = "燃油币账户";
//           } else {
//             v.from = "燃油币账户";
//             v.to = "资金账户";
//           }
//           return v;
//         });
//         if (pageIndex.value === 1) {
//           transferList.value = zdata;
//         } else {
//           transferList.value = transferList.value.concat(zdata);
//         }
//         loading.value = false;
//         if (transferList.value.length >= res.data.total) {
//           finished.value = true;
//         }
//       }
//     });
// };
const getList = (index: number) => {
  switch (index) {
    case 0:
    getTabList1();
      break;
    case 1:
    // getTabList2();
    getTabList3()
      break;
    case 2:
    getTabList3();
      break;
    // case 2:
    //   getTabList3();
    //   break;
  }
};
watch(
  tabIndex,
  (newVal, oldVal) => {
    pageIndex.value = 1;
    showTime.value = ["", ""];
    startDate.value = "";
    endDate.value = "";
    resetList();
    // getList(newVal);
  },
  {
    immediate: true,
  }
);

const rewardPropItems = reactive([
  {
    name: "类型",
    prop: "type",
  },
  {
    name: "用户ID",
    prop: "userId",
    copy: true,
  },
  {
    name: "奖励(USDT)",
    prop: "fuelQuantity",
  },
  {
    name: "比例(%)",
    prop: "fuelProportion",
  },
  {
    name: "时间",
    prop: "createTime",
  },
]);

const rechargePropItems = reactive([
  {
    name: "数量(USDT)",
    prop: "quantity",
  },
  {
    name: "时间",
    prop: "createTime",
  },
  {
    name: "交易哈希",
    prop: "transactionHash",
    copy: true,
    // underline: true,
  },
  {
    name: "类型",
    prop: "type",
  },
  {
    name: "状态",
    prop: "state",
  },
]);
const withdrawalPropItems = reactive([
{
    name: "类型",
    prop: "type",
  },
  {
    name: "数量(USDT)",
    prop: "quantity",
  },
  {
    name: "消耗贡献值",
    prop: "quantity",
  },
  {
    name: "手续费(USDT)",
    prop: "serviceCharge",
  },
  {
    name: "时间",
    prop: "createTime",
  },
  {
    name: "到账地址",
    prop: "arrivalAddress",
  },
  {
    name: "交易哈希",
    prop: "transactionHash",
    copy: true,
    // underline: true,
  },
  {
    name: "状态",
    prop: "state",
  },
]);
const transferPropItems = reactive([
  {
    name: "类型",
    prop: "type",
  },
  {
    name: "数量(USDT)",
    prop: "quantity",
  },
  {
    name: "时间",
    prop: "createTime",
  },
]);
const handleWithdrawal = ()=>{
  router.push({
    path:'/capital/withdrawal',
    query:{
      type: 1
    }
  })
}
// const handlePay = (id: string) => {
//   Dialog({
//     title: "提示",
//     showCancelButton: true,
//     message: "确定购买燃油包?",
//   })
//     .then(() => {
//       http
//         .post("user/transfer_detailed", {
//           fuelSetMealId: id,
//           currency: "USDT",
//         })
//         .then((res: any) => {
//           if (res.code === 0) {
//             Toast("购买成功");
//             store.dispatch("users/getUserWalletInfo");
//           }
//         });
//     })
//     .catch(() => {
//       // on cancel
//     });
// };
const toPage = (url: string) => {
  router.push(url);
};
const handleTrans = () => {
  router.push({
    path: "/capital/transfer",
    query: {
      active: 1,
    },
  });
};
defineExpose({
  getList,
});
</script>
    
<style lang="scss" scoped>
.box {
  padding: 10px 0 14px;
  .tbox {
    // height: 100px;
    padding: 20px 24px 10px;
    position: relative;
    .t1 {
      font-size: 22px;
      font-weight: 600;
      color: #000;
    }
    .t2 {
      font-size: 12px;
      color: #878b97;
      margin: 12px 0 22px;
    }
    .t3 {
      display: flex;
      justify-content: space-between;
      margin-top:32px;
      .t3-item {
        flex: 1;
        height: 34px;
        line-height: 34px;
        background: #f1f1f1;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: 13px;
        &:first-child {
          // margin-right: 20px;
        }
      }
    }
  }
}
.obox {
  position: relative;
  min-height: calc(60vh);
  .rlimg {
    position: absolute;
    font-size: 22px;
    width: 22px;
    right: 24px;
    top: 10px;
    z-index: 999;
  }
  .rlfont {
    position: absolute;
    color: #000;
    right: 15px;
    top: 36px;
    font-weight: 600;
    font-size: 10px;
    transform: scale(0.8);
    z-index: 999;
  }
}
.libox {
  padding: 10px 20px;
  border-bottom: 1px solid #f1f1f1;
}
.mbox {
  // margin-top: 45px;
  padding: 10px 14px 0;
  .mli {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
    background: url("@/assets/images/yhq.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .mfont {
      height: 68px;
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .m1 {
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      span {
        font-size: 13px;
      }
    }
    .m0 {
      font-size: 13px;
      color: #412301;
      font-weight: 600;
    }
    .m2 {
      font-size: 17px;
      color: #a41010;
      font-weight: 600;
      span {
        font-size: 12px;
      }
    }
    .m3 {
      font-size: 14px;
      position: absolute;
      top: 50%;
      right: 24px;
      line-height: 18px;
      word-wrap: break-word;
      transform: translateY(-50%);
      width: 20px;
      color: #fff;
      font-weight: 600;
      span {
        font-size: 13px;
      }
    }
  }
}
.tb {
  position: absolute;
  right: 30px;
  top: 16px;
  display: flex;
  align-items: center;
  img {
    width: 30px;
  }
  .tb1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    .tb11 {
      font-size: 12px;
      color: #878b97;
      margin-bottom: 10px;
    }
    .tb12 {
      color: #333;
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>